<template>
    <a-radio-group v-model:value="time">
        <a-radio-button @click="getRankingList('LAST_MONTH')" value="LAST_MONTH">上个月</a-radio-button>
        <a-radio-button @click="getRankingList('MONTH')" value="MONTH">本月</a-radio-button>
        <a-radio-button @click="getRankingList('LAST_WEEK')" value="LAST_WEEK">上一周</a-radio-button>
    </a-radio-group>
    <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script>
    import {request} from "@/utils/request";
    import * as echarts from "echarts";
    import api from "@/constants/api";

    export default {
        name: "RankingListPage",
        data() {
            return {
                time: 'MONTH',
                timeInterVal: '',
            }
        },
        mounted() {
            this.getRankingList('MONTH');
        },

        methods: {

            getRankingList(time) {
                let that = this;
                request({
                    url: api.GET_RANK_LIST,
                    pureData: false,
                    params: {
                        time: time,
                    }
                }).then(res => {
                    if (res.code === 200) {
                        that.drawChart(res.data);
                    }
                })
            },

            drawChart(rankList) {
                let yData = [];
                let xData = [];
                rankList.forEach(item => {
                    yData.push(item.name);
                    xData.push(item.number);
                })
                // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
                let myChart = echarts.init(document.getElementById("main"));
                // 指定图表的配置项和数据
                let option = {
                    xAxis: {
                        max: 'dataMax'
                    },
                    yAxis: {
                        type: 'category',
                        data: yData,
                        inverse: true,
                        animationDuration: 300,
                        animationDurationUpdate: 300,
                        max: 4 // only the largest 5 bars will be displayed
                    },
                    series: [
                        {
                            realtimeSort: true,
                            name: '销量排行榜前五',
                            type: 'bar',
                            data: xData,
                            label: {
                                show: true,
                                position: 'right',
                                valueAnimation: true
                            }
                        }
                    ],
                    legend: {
                        show: true
                    },
                    animationDuration: 3000,
                    animationDurationUpdate: 3000,
                    animationEasing: 'linear',
                    animationEasingUpdate: 'linear'
                };

                myChart.setOption(option);
            },

        }

    }
</script>

<style scoped>

</style>